<template>
  <div class="app-nobgbody" ref="appContainer">
    <!-- <indexTop></indexTop> -->
    <div class="viewBox display">
      <div class="viewleft">
        <div class="viewTitle">今日支出汇总</div>
        <div class="viewTip">
          <div class='round'>
            <div class="round-flicker"></div>
          </div>数据统计时间:{{ currentTime }}
        </div>
        <div class="viewList">
          <div class="viewBtnTit">筛选方式</div>
          <div class="viewBtn" v-for="(item,index) in synthesisList"  :class="index == flag ? 'btnSelect' : '' "
            :key="index" @click="changeTabar(index)">{{item}}</div>
        </div>
        <div class="viewInfoList">
          <div class="viewInfo">
              <div class="viewinfoTit">油料消耗</div>
              <div class="viewinfoData">{{showData.videoCount}}<a>元</a></div>
              <div class="viewInfoTipList">
                <div class="viewinfoTip">消耗数<a class="aR">{{showData.imperfectionCount}} 吨</a></div>
                <div class="viewinfoTip">油料类型<a class="aG">重柴油</a></div>
              </div>
          </div>
          <div class="viewLine"></div>
          <div class="viewInfo">
              <div class="viewinfoTit">航行消耗</div>
              <div class="viewinfoData">{{showData.totalResource}}<a>元</a></div>
              <div class="viewinfoTip">较昨日<a :class="showData.totalResource>showData.yesterdayResource?'aG':'aR'">{{currenResource}}</a></div>
          </div>
          <div class="viewLine"></div>
          <div class="viewInfo">
              <div class="viewinfoTit">维修/保养消耗</div>
              <div class="viewinfoData">{{showData.totalSize}}<a>元</a></div>
              <div class="viewinfoTip">较昨日<a :class="showData.totalSize>showData.yesterdaySize?'aG':'aR'">{{currenSize}}</a></div>
          </div>
          <div class="viewLine"></div>
          <div class="viewInfo">
              <div class="viewinfoTit">其他消耗</div>
              <div class="viewinfoData">{{showData.totalDuration}}<a>元</a></div>
              <div class="viewinfoTip">较昨日<a :class="showData.totalDuration>showData.yesterdayDuration?'aG':'aR'">{{currenDuration}}</a></div>
          </div>
        </div>
      </div>
      <!-- <div class="viewPie">
        <div id="viewPie" class="echarsPage"></div>
      </div> -->

    </div>
    <div class="viewBox">
      <div class="viewTitle">营收情况统计</div>
      <div class="viewTip">
        <div class='round'>
          <div class="round-flicker"></div>
        </div>数据统计时间:{{ currentTime }}
      </div>
      <div class="viewList">
        <div class="viewBtnTit">筛选方式</div>
        <div class="viewBtn" v-for="(item,index) in tabList" :class="index == current ? 'btnSelect' : '' " :key="index"
          @click="changeTab(index)">{{item}}</div>
      </div>
      <div id="viewTable" class="echarsView"></div>
    </div>

  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import indexTop from '../../components/indexTop.vue';
  export default {
    components: {
      indexTop,
    },
    data() {
      return {
        userList: [], //日均观看时长
        videoList: [],
        timeList: [], //近七日数组
        userData: {}, //
        tabList: ['近七天', '近一年'],
        selectList: ['电影', '电视剧'],
        current: 0, //切换参数
        monthUploadNumList: [], //近一年上传数组
        dayUploadNumList: [], //近七日上传数组
        showTime: [], //上传曲线时间数组
        showNum: [], //上传曲线个数数组
        watchList: [], //播放时长
        hotList: [], //播放量
        synthesisList:['华福油','华福油3','华福油5'],
        showData:{
          videoCount:'7568.46',
          imperfectionCount:'1.71',
          totalResource:'2051',
          yesterdayResource:'1147',
          totalSize:300,
          yesterdaySize:100,
          totalDuration:500,
          yesterdayDuration:1507,
        },
        flag:1
      };
    },
    created() {
      this.init()
    },
    computed: {
      //数据获取时间（获取当前时间）
      currentTime() {
        return this.getCurrentTime();
      },
      currenResource(){
        if(this.showData.yesterdayResource < this.showData.totalResource){
          const difference = Math.abs(this.showData.yesterdayResource - this.showData.totalResource);
          const percentDiff = Number((difference / this.showData.yesterdayResource) * 100).toFixed(2);
          return "+" + percentDiff + '%';
          this.$forceUpdate()
        }else{
          const decreasePercentage = Number(((this.showData.yesterdayResource - this.showData.totalResource) / this.showData.yesterdayResource) * 100).toFixed(2);
          return "-" + decreasePercentage + '%';
          this.$forceUpdate()
        }
      },
      currenDuration(){
        if(this.showData.yesterdayDuration < this.showData.totalDuration){
          const difference = Math.abs(this.showData.yesterdayDuration - this.showData.totalDuration);
          const percentDiff = Number((difference / this.showData.yesterdayDuration) * 100).toFixed(2);
          return "+" + percentDiff + '%';
          this.$forceUpdate()
        }else{
          const decreasePercentage = Number(((this.showData.yesterdayDuration - this.showData.totalDuration) / this.showData.yesterdayDuration) * 100).toFixed(2);
          return "-" + decreasePercentage + '%';
          this.$forceUpdate()
        }
      },
      currenSize(){
        if(this.showData.yesterdaySize < this.showData.totalSize){
          const difference = Math.abs(this.showData.yesterdaySize - this.showData.totalSize);
          const percentDiff = Number((difference / this.showData.yesterdaySize) * 100).toFixed(2);
          return "+" + percentDiff + '%';
          this.$forceUpdate()
        }else{
          const decreasePercentage = Number(((this.showData.yesterdaySize - this.showData.totalSize) / this.showData.yesterdaySize) * 100).toFixed(2);
          return "-" + decreasePercentage + '%';
          this.$forceUpdate()
        }
      }

    },
    mounted() {
      let that = this;
      that.$erd.listenTo(that.$refs.appContainer, element => {
        that.$nextTick(() => {
          var myChart2 = echarts.init(document.getElementById("viewTable"));
          setTimeout(function() {
            myChart2.resize();
          }, 200)
        })
      });
    },
    methods: {
      //获取首页数据
      init() {
        var that = this
        setTimeout(function() {
          that.showTime = ['2025-02-18','2025-02-19','2025-02-20','2025-02-21','2025-02-22','2025-02-23','2025-02-24'];
          that.showNum = [85041,35041,65041,67520,75201,12541,52101];
          that.initView()
        }, 200)

      },
      changeTabar(index){
        var that = this;
        that.flag = index
      },

      //上传曲线切换筛选
      changeTab(index) {
        var that = this;
        that.current = index
        that.showTime = [];
        that.showNum = [];
        if (index == 0) {
          that.showTime = ['2025-02-18','2025-02-19','2025-02-20','2025-02-21','2025-02-22','2025-02-23','2025-02-24'];
          that.showNum = [85041,35041,65041,67520,75201,12541,52101];
          that.initView()
        } else {
          that.showTime = ['2024-03','2024-04','2024-05','2024-06','2024-07','2024-08','2024-09','2024-10','2024-11','2024-12','2025-01','2025-02'];
          that.showNum = [185041,135041,165041,167520,175201,212541,322101,264510,250453,206581,350151,400151];
          that.initView()
        }
        that.$forceUpdate()


      },
      //获取当前时间
      getCurrentTime() {
        const now = new Date();
        return `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(2, '0')}月${String(now.getDate()).padStart(2, '0')}日 ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
      },

      //完善情况
      initPie() {
        const chart = echarts.init(document.getElementById('viewPie'))
        const option = {
          title: {
            text: '营收情况',
            left:'center',
          },
          tooltip: {
            trigger: 'item'
          },
          color: ['rgba(0, 207, 138, 0.3)', 'rgba(0, 207, 138, 0.7)', 'rgba(0, 207, 138, 1.0)'],
          series: [{
            name: '营收情况统计',
            type: 'pie',
            radius: '70%',
            data: [{
                value: this.synthesisList[0].imperfectionCount,
                name: '无数据'
              },
              {
                value: this.synthesisList[0].beImprovingCount,
                name: '完善中'
              },
              {
                value: this.synthesisList[0].perfectCount,
                name: '已完善'
              },
            ],
            roseType: 'radius',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        chart.setOption(option)
      },
      //上传曲线
      initView() {
        const chart = echarts.init(document.getElementById('viewTable'))
        const option = {
          title: {
            text: '单位: 元',
            textStyle: {
              color: '#a3a3a3',
              fontSize: 12
            }
          },
          grid: {
            top: '10%',
            bottom: '10%',
            left: '40',
            right: '40'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              var relVal = params[0].marker + params[0].name + '营收：' + params[0].data + '元'
              return relVal;
            },
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            data: this.showTime,
            axisLabel: {
              show: true,
              color: '#8b9299',
              interval: 0,
            },
            axisLine: {
              show: false,

            },

          }],
          yAxis: {
            type: 'value',
            min: 0,
            interval: 10,
            minInterval: 1,
          },
          series: [{
            data: this.showNum,
            type: 'line',
            symbolSize: 5, //Number类型 设置圆点大小
            smooth: true, //true曲线; false折线
            lineStyle: {
              width: '10px' // 设置线条粗细为5
            },
            itemStyle: {
              normal: {
                color: '#00cf8a', //改变折线点的颜色
                lineStyle: {
                  color: '#00cf8a', //改变折线颜色
                  type: 'solid'
                }
              }
            },
            areaStyle: {
              //折线图颜色半透明
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 207, 138, 0.5)' // 上部颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0, 207, 138, 0.0)' // 下部颜色
                }
              ])
            }
          }]
        }
        chart.setOption(option)
      },

    },
  };
</script>

<style scoped lang="scss">
  .display {
    display: flex;
    // height: 380px !important;
    height: 300px !important;
    align-items: flex-start;
    justify-content: space-between;
  }

  .echarsBox {
    width: 100%;
    height: 370px;
  }

  .echarsPage {
    width: 100%;
    height: 100%;
  }

  .app-nobgbody {
    overflow-y: scroll !important;
    height: calc(100vh - 70px) !important;
    width: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    padding: 15px !important;
  }

  .tit-1 {
    font-size: 16px;
    color: #15274d;
    font-weight: bold;
  }

  .viewTitle {
    font-size: 17px;
    font-weight: 500;
  }

  .viewTip {
    font-weight: 400;
    color: rgba(0, 0, 0, .3);
    margin: 5px 0;
    display: flex;
    align-items: center;
  }

  .viewBox {
    padding: 20px;
    width: 100%;
    height: 530px;

    margin-bottom: 20px;
    border-radius: 15px;
    background: #fff;
    font-size: 14px;
    color: rgba(0, 0, 0, .9);

    .viewleft {
      width: 100%;
      .viewInfoList{
        width: 100%;
        display: flex;align-items: center;justify-content: space-between;
        height: 145px;
        .viewInfo{
          width: calc((100% - 82px) / 3);font-size: 15px;
          color: rgba(0, 0, 0, .9);

          a {
              text-decoration: none;
              cursor: default;
          }
          .viewinfoData{
            font-size: 30px;
            margin: 10px 0;
            a{font-size: 14px;margin-left: 5px;}
          }
          .viewInfoTipList{
            display: flex;flex-wrap: wrap;
          }
          .viewinfoTip{
            font-size: 13px;color: #999;margin-right: 10px;
            .aG{color: #00cf8a;margin-left: 5px;}
            .aR{color: #fa5151;margin-left: 5px;}
            .aY{color: #ffcf0e;margin-left: 5px;}
          }
        }
        .viewLine{height: 100px;background: #ddd;width: 1px;margin: 0 20px;}
      }
    }

    .viewPie {
      width: 540px;
      height: 100%;
    }

    .viewList {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 10px 0;

      .viewBtnTit {
        margin-right: 20px;
      }

      .viewBtn {
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 19px;
        text-align: center;
        margin-right: 15px;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 40px;
      }

      .viewBtn:hover {
        background: rgba(0, 0, 0, 0.06);
        border: none;
      }

      .btnSelect {
        background: rgba(0, 0, 0, 0.06);
        border: none;
      }
    }

    .echarsView {
      width: 100%;
      height: 400px;
    }
  }


  .bb-right {
    height: 300px;
    width: calc(100% - 320px);
    border: 15px;
    padding-top: 15px;
    position: relative;
    overflow: hidden;

    .echarsLine {
      width: 100%;
      height: 100%;
    }

    .bb-left-topTot {
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(42, 97, 255, 0.1);
      color: #2a61ff;
      padding: 3px 6px;
      border-radius: 0 0 0 15px;
    }
  }

  .bb-left {
    width: 300px;
    height: 100%;
    padding: 10px;
    border-radius: 15px;
    background: #fff;
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    .bb-info {
      height: 45%;
      padding: 10px 0;
      width: 100%;

      .bb-text {
        font-size: 15px;
        font-weight: 400;
        color: rgba(0, 0, 0, .9);
        margin-bottom: 30px;
      }

      .bb-num {
        font-size: 24px;
        color: #000;
        width: 100%;
        text-align: center;

        a {
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, .9);
          margin-left: 5px;
        }
      }
    }

    .bb-line {
      width: 100%;
      height: 1px;
      background: rgba(0, 0, 0, .1);
      margin: 10px 0;
    }
  }

  .isOdd {
    background: rgba(0, 0, 0, 0.02);
  }

  .round {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #00cf8a;
    position: relative;
  }

  .round-flicker:before,
  .round-flicker:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgba(0, 207, 138, 0.5);
    border-radius: 50%;
    animation: warn 2s ease-out 0s infinite; //添加动画
  }

  @keyframes warn {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }

    25% {
      transform: scale(1);
      opacity: 0.75;
    }

    50% {
      transform: scale(1.5);
      opacity: 0.5;
    }

    75% {
      transform: scale(2);
      opacity: 0.25;
    }

    100% {
      transform: scale(2.5);
      opacity: 0;
    }
  }
</style>
